import QtQuick
import QtQuick.Layouts
import QtQuick.Controls
import Theme
import QtQuick.Effects
import SbotIde

ApplicationWindow {
    visible: true
    width: 840
    height: 580
    minimumWidth: 840
    minimumHeight: 580
    color: Theme.themeColor0

    Component.onCompleted: {
        SbotIde.setThemeManager(Theme);
    }

    RowLayout {
        anchors.fill: parent
        spacing: 10

        Rectangle {
            id: "functionMenu"
            Layout.preferredWidth: 80
            Layout.fillHeight: true
            Layout.leftMargin: 10
            Layout.topMargin: 10
            Layout.bottomMargin: 10
            color: "transparent"

            Behavior on opacity {
                NumberAnimation {
                    duration: 150
                }
            }

            Behavior on Layout.preferredWidth {
                NumberAnimation {
                    duration: 250
                }
            }

            Rectangle {
                anchors.fill: parent
                color: Theme.themeColor1
                radius: 10
                layer.enabled: true
                layer.effect: MultiEffect {
                    shadowEnabled: true
                    shadowBlur: 0.5
                }

                ColumnLayout {
                    anchors.fill: parent
                    spacing: 0

                    Rectangle {
                        Layout.preferredHeight: 75
                        Layout.fillWidth: true
                        color: "transparent"

                        IconImage {
                            width: 45
                            height: 45
                            anchors.centerIn: parent
                            source: "qrc:/Icon/SbotLogo.png"
                            color: Theme.logoColor
                        }

                        MouseArea {
                            anchors.fill: parent

                            onClicked: {
                                pluginView.visible = false;
                                mainView.visible = true;
                            }
                        }
                    }

                    Rectangle {
                        Layout.preferredWidth: parent.width * 0.8
                        Layout.preferredHeight: 1
                        Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
                        color: Theme.logoColor
                    }

                    /* Function menu list. */
                    Rectangle {
                        Layout.fillWidth: true
                        Layout.fillHeight: true
                        color: "transparent"

                        ListModel {
                            id: pluginList
                            objectName: "pluginList"

                            function clearElement() {
                                clear();
                            }

                            function addElement(element) {
                                append(element);
                            }

                            // ListElement { index: 0; icon: "qrc:/Res/Icon/dark.png" }
                        }

                        ListView {
                            id: pluginListView
                            anchors.fill: parent
                            anchors.topMargin: 10
                            spacing: 5
                            model: pluginList

                            delegate: Rectangle {
                                width: pluginListView.width
                                height: 50
                                color: "transparent"

                                IconImage {
                                    width: 35
                                    height: 35
                                    anchors.centerIn: parent
                                    source: model.icon
                                    color: Theme.iconColor

                                    MouseArea {
                                        anchors.fill: parent
                                        acceptedButtons: Qt.LeftButton | Qt.RightButton
                                        hoverEnabled: true

                                        onPressed: function (mouse) {
                                            if (mouse.button === Qt.RightButton) {
                                                var menuPos = mapToItem(pluginRightKeyMenu.parent, mouse.x, mouse.y);
                                                pluginRightKeyMenu.open(model.index, menuPos);
                                            } else if (mouse.button === Qt.LeftButton) {
                                                SbotIde.openPlugin(model.index);
                                                pluginView.visible = true;
                                                mainView.visible = false;
                                            }
                                        }

                                        onEntered: {
                                            parent.width = 38;
                                            parent.height = 38;
                                        }

                                        onExited: {
                                            parent.width = 35;
                                            parent.height = 35;
                                        }
                                    }
                                }
                            }
                        }
                    }

                    Rectangle {
                        Layout.preferredWidth: parent.width * 0.8
                        Layout.preferredHeight: 1
                        Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
                        color: Theme.logoColor
                    }

                    /* Ide setting button */
                    Rectangle {
                        Layout.preferredHeight: 80
                        Layout.fillWidth: true
                        color: "transparent"

                        IconImage {
                            width: 40
                            height: 40
                            anchors.centerIn: parent
                            color: Theme.iconColor
                            source: "qrc:/Icon/Setting.png"

                            Behavior on rotation {
                                NumberAnimation {
                                    duration: 500
                                }
                            }
                            MouseArea {
                                anchors.fill: parent
                                hoverEnabled: true

                                onEntered: {
                                    parent.rotation = 180;
                                }

                                onExited: {
                                    parent.rotation = 0;
                                }

                                onClicked: {
                                    SbotIde.saveIdeConfig();
                                }
                            }
                        }
                    }
                }
            }
        }

        Rectangle {
            Layout.preferredWidth: 5
            Layout.fillHeight: true
            color: "transparent"

            IconImage {
                id: pullButton
                width: 20
                height: 20
                rotation: 0
                anchors.centerIn: parent
                source: "qrc:/Icon/Pull.png"
                color: Theme.iconColor

                Behavior on rotation {
                    NumberAnimation {
                        duration: 250
                    }
                }

                MouseArea {
                    anchors.fill: parent
                    hoverEnabled: true

                    onClicked: {
                        pullButton.rotation = pullButton.rotation === 0 ? 180 : 0;
                        functionMenu.opacity = functionMenu.opacity === 0 ? 1 : 0;
                        functionMenu.Layout.preferredWidth = functionMenu.Layout.preferredWidth === 80 ? 0 : 80;
                    }

                    onEntered: {
                        parent.width = 23;
                        parent.height = 23;
                    }

                    onExited: {
                        parent.width = 20;
                        parent.height = 20;
                    }
                }
            }
        }

        Rectangle {
            Layout.fillWidth: true
            Layout.fillHeight: true
            Layout.rightMargin: 10
            color: "transparent"

            ColumnLayout {
                anchors.fill: parent
                spacing: 5

                /* Content display area.  */
                Rectangle {
                    Layout.fillHeight: parent
                    Layout.fillWidth: parent
                    Layout.topMargin: 10
                    clip: true
                    color: "transparent"

                    layer.enabled: true
                    layer.effect: MultiEffect {
                        shadowEnabled: true
                        shadowBlur: 0.5
                    }

                    SplitView {
                        id: mainView
                        visible: true
                        anchors.fill: parent

                        handle: Rectangle {
                            implicitWidth: 20
                            color: "transparent"

                            IconImage {
                                width: 30
                                height: 30
                                rotation: 90
                                anchors.centerIn: parent
                                source: "qrc:/Icon/More.png"
                                color: Theme.iconColor
                            }
                        }

                        /* Work space view. Such file list. */
                        Rectangle {
                            SplitView.minimumWidth: 150
                            SplitView.preferredWidth: 150
                            color: "transparent"

                            Rectangle {
                                anchors.fill: parent
                                radius: 15
                                color: Theme.themeColor1

                                Component.onCompleted: {}
                            }
                        }

                        /* Code work view. */
                        Rectangle {
                            SplitView.fillWidth: true
                            color: "transparent"

                            Rectangle {
                                id: codeRectangle
                                anchors.fill: parent
                                radius: 15
                                color: Theme.themeColor1

                                Component.onCompleted: {}
                            }
                        }

                        /* Blueprint work view. */
                        Rectangle {
                            SplitView.preferredWidth: parent.width * 0.7
                            color: "transparent"

                            Rectangle {
                                id: blueprintRectangle
                                objectName: "blueprintRectangle"
                                anchors.fill: parent
                                radius: 15
                                color: Theme.themeColor1

                                /* Load blueprint module view. */
                                Component.onCompleted: {}
                            }
                        }
                    }

                    Rectangle {
                        id: pluginView
                        objectName: "pluginView"
                        visible: false
                        anchors.fill: parent
                        clip: true
                        color: Theme.themeColor1
                        radius: 10
                    }
                }

                /* Global control switch shortcut. */
                Rectangle {
                    Layout.fillWidth: parent
                    Layout.preferredHeight: 20
                    Layout.bottomMargin: 10
                    clip: true
                    color: Theme.themeColor1
                    radius: 10
                    layer.enabled: true
                    layer.effect: MultiEffect {
                        shadowEnabled: true
                        shadowBlur: 0.5
                    }

                    Row {
                        anchors.fill: parent
                        anchors.leftMargin: 5
                        anchors.rightMargin: 5
                        spacing: 5

                        Rectangle {
                            width: 20
                            height: parent.height
                            color: "transparent"

                            IconImage {
                                width: 15
                                height: 15
                                anchors.centerIn: parent
                                source: Theme.themeIcon

                                MouseArea {
                                    anchors.fill: parent
                                    hoverEnabled: true

                                    onClicked: {
                                        Theme.switchTheme();
                                    }

                                    onEntered: {
                                        parent.width = 17;
                                        parent.height = 17;
                                    }

                                    onExited: {
                                        parent.width = 15;
                                        parent.height = 15;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    /* Function item right Menu. */
    Rectangle {
        anchors.fill: parent
        visible: false
        color: "transparent"

        MouseArea {
            anchors.fill: parent

            onClicked: {
                pluginRightKeyMenu.close();
            }
        }

        Rectangle {
            id: pluginRightKeyMenu
            width: 100
            height: 130
            radius: 5
            color: Theme.themeColor1
            layer.enabled: true
            layer.effect: MultiEffect {
                shadowEnabled: true
                shadowBlur: 0.5
            }

            property int pluginIndex: 0

            function open(index, pos) {
                pluginIndex = index;
                parent.visible = true;
                pluginRightKeyMenu.x = pos.x;
                pluginRightKeyMenu.y = pos.y;
            }

            function close() {
                parent.visible = false;
            }

            ListModel {
                id: pluginRightKeyMenuModel

                ListElement {
                    menuText: "Open"
                }

                ListElement {
                    menuText: "Close"
                }

                ListElement {
                    menuText: "Reload"
                }

                ListElement {
                    menuText: "Remove"
                }
            }

            ListView {
                anchors.fill: parent
                anchors.margins: 5
                model: pluginRightKeyMenuModel

                delegate: Rectangle {
                    width: parent.width
                    height: 30
                    color: "transparent"
                    radius: 5
                    layer.enabled: true
                    layer.effect: MultiEffect {
                        shadowEnabled: true
                        shadowBlur: 0.5
                    }
                    anchors.horizontalCenter: parent.horizontalCenter

                    Text {
                        text: model.menuText
                        color: Theme.textColor
                        anchors.verticalCenter: parent.verticalCenter
                    }

                    MouseArea {
                        anchors.fill: parent
                        hoverEnabled: true

                        onClicked: {
                            if (model.menuText === "Open") {
                                SbotIde.openPlugin(pluginRightKeyMenu.pluginIndex);
                            } else if (model.menuText === "Close") {
                                SbotIde.closePlugin(pluginRightKeyMenu.pluginIndex);
                            } else if (model.menuText === "Reload") {
                                SbotIde.reloadPlugin(pluginRightKeyMenu.pluginIndex);
                            } else if (model.menuText === "Remove") {
                                SbotIde.removePlugin(pluginRightKeyMenu.pluginIndex);
                            }
                            pluginRightKeyMenu.close();
                        }
                    }
                }
            }
        }
    }

    /* Global message dialog. */
    Rectangle {
        id: globalMsgDialog
        objectName: "globalMsgDialog"
        visible: false
        color: "transparent"
        anchors.fill: parent

        property var title: ""
        property var msg: ""

        function showMsgDialog(title, msg) {
            globalMsgDialog.title = title;
            globalMsgDialog.msg = msg;
            globalMsgDialog.visible = true;
            globalMsgDialogMouseArea.opacity = 0.5;
        }

        Rectangle {
            id: globalMsgDialogMouseArea
            opacity: 0
            color: "white"
            anchors.fill: parent

            Behavior on opacity {
                NumberAnimation {
                    duration: 250
                }
            }

            MouseArea {
                anchors.fill: parent
            }
        }

        Rectangle {
            width: 250
            height: 180
            clip: true
            color: Theme.themeColor2
            radius: 10
            anchors.centerIn: parent

            IconImage {
                width: 20
                height: 20
                x: parent.width - 30
                y: 10
                source: "qrc:/Icon/Close.png"
                color: Theme.iconColor

                MouseArea {
                    hoverEnabled: true
                    anchors.fill: parent

                    onClicked: {
                        globalMsgDialog.visible = false;
                        globalMsgDialogMouseArea.opacity = 0;
                    }

                    onEntered: {
                        parent.width = 22;
                        parent.height = 22;
                    }

                    onExited: {
                        parent.width = 20;
                        parent.height = 20;
                    }
                }
            }

            ColumnLayout {
                anchors.fill: parent
                spacing: 0

                Rectangle {
                    Layout.fillWidth: true
                    Layout.preferredHeight: 40
                    color: "transparent"

                    Text {
                        anchors.fill: parent
                        horizontalAlignment: Text.AlignHCenter
                        verticalAlignment: Text.AlignVCenter
                        font.bold: true
                        font.pointSize: 15
                        text: globalMsgDialog.title
                        color: Theme.textColor
                    }
                }

                Rectangle {
                    Layout.fillWidth: true
                    Layout.fillHeight: true
                    color: "transparent"

                    Flickable {
                        anchors.margins: 10
                        anchors.fill: parent
                        contentWidth: parent.width - 20
                        contentHeight: globalMessageText.implicitHeight
                        clip: true

                        TextEdit {
                            id: globalMessageText
                            anchors.fill: parent
                            wrapMode: Text.Wrap
                            readOnly: true
                            text: globalMsgDialog.msg
                            color: Theme.textColor
                        }
                    }
                }
            }
        }
    }
}
